import { View, Image } from '@tarojs/components'
import { AtActivityIndicator } from 'taro-ui'
import onNavigation from '@/utils/command/onNavigation'
import './index.scss'

// 门店导航
export default ({ goods = { contentList: {} } }) => {
    const { contentList = { content: [] } } = goods
    const loading = contentList['content'] && contentList['content'].length > 0
    if (contentList['content'] && contentList['content'].length > 10) {
        contentList['content'] = contentList['content'].slice(0, 10)
    }
    const style = {
        backgroundImage: contentList['layoutBackground'] ? `url('${contentList['layoutBackground']}')` : undefined,
        marginBottom: goods['margin'] ? `${goods['margin']}px` : 0
    }
    return (
        <View className={`navigation-box ${loading ? "" : 'height330'} `} style={{ ...style }} >
            {
                loading ? (
                    <View className='list'>
                        {
                            contentList['content'].map((item) => {
                                return (
                                    // 根据数量 5个一格/4个一格
                                    <View className={contentList['content'].length > 8 || contentList['content'].length == 5 ? 'detail' : 'detail-four'} key={item.title} onClick={() => onNavigation(item)}>
                                        <Image lazyLoad className='img' src={item.contentImg} />
                                        <View className='text'>{item.contentTitle}</View>
                                    </View>
                                )
                            })
                        }
                    </View>
                ) :
                    <AtActivityIndicator mode='center' />
            }
        </View>
    )
}
